<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<u-navbar bgColor="#0e3a5e" title="关重件列表" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true"
			leftIconColor="#fff" :titleStyle="data.titleStyle">
		</u-navbar>
		<!-- #endif -->
		<u-sticky>
			<!-- #ifdef APP-PLUS -->
			<u-navbar bgColor="#0e3a5e" title="关重件列表" :autoBack="true"  :safeAreaInsetTop="true" :placeholder="true"
				leftIconColor="#fff" :titleStyle="data.titleStyle">
			</u-navbar>
			<!-- #endif -->
			<view class="searchBox">
				<u-search :clearabled="true" v-model="data.listQuery.name" :animation="true" placeholder="请输入关重件名称"
					@search="handleSearch" @custom="handleSearch" @change="handleSearch"
					@clear="handleSearch"></u-search>
			</view>
		</u-sticky>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="pdBox" v-if="data.list.length">
				<view class="key-card" v-for="item in data.list" :key="item.id">
					<view class="keyBox">
						<view class="name">型号：{{item.model}}</view>
						<view class="name">关重件：{{item.name}}</view>
						<view class="">
							<u-upload :fileList="item.keyfiles" @afterRead="afterRead" :name='`${item.id}`'
								@delete="deletePic" multiple :previewFullImage="true"></u-upload>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script lang="ts" setup>
	import { keyimportantlist, filedelete } from '@/api/planList/planList.js'
	import { reactive } from "vue";
	import { onShow,onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import base from "@/common/baseUrl.js";
	const base_url = base.baseUrl;
	const upOption = {
		noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
		textNoMore: '-- 没有更多啦 --', // 没有更多数据的提示文本
		empty: {
			tip: '~ 暂无数据 ~' // 提示
		}
	}
	
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)

	const data : any = reactive({
		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},
		list: [],
		isRefreshList: [],
		planEqmId: null,
		processId: null,
		noMore: false,
		listQuery: {
			planEqmId: null,
			name: ''
		}
	});
	
	onLoad((options) => {
		if(options.planEqmId){
			data.planEqmId = options.planEqmId || null;
			data.listQuery.planEqmId = data.planEqmId
		}
	});

	onShow(() => {
	
	})
	const upCallback = async (mescroll) => {
		try{
			const params = {
				current: mescroll.num,
				size: mescroll.size,
				planEqmId: data.listQuery.planEqmId,
				name: data.listQuery.name
			}
			const res = await keyimportantlist(params)
			const curPageData = res.data.records || [] // 当前页数据
			if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
			data.list = data.list.concat(curPageData)
			data.list.map(item => {
				let keyfiles = []
				if (item.files && item.files.length) {
					item.files.map(i => {
						const keyfilesObj = {
							fileId: i.id,
							keyId: item.id,
							url: i.uri
						}
						keyfiles.push(keyfilesObj)
					})
				
				}
				item.keyfiles = keyfiles
				
			})
			mescroll.endByPage(curPageData.length, res.data.total);
		}catch(e){
			//TODO handle the exception
		}
	}
	const afterRead = (e) => {
		console.log(e)
		const keyId = e.name;
		let files = e.file;
		if (files.length) {
			files.map(async (item) => {
				uni.uploadFile({
					url: base_url + '/proplan/plan/keyimportant/fileupload', //接口
					filePath: item.thumb,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync("access_token"),
					},
					file: item,
					formData: {
						keyId
					},
					success: async res => {
						let resData = JSON.parse(res.data);
						if (resData.status == 200 && resData.data.uri) {
							data.list.map((i) => {
								if (i.id == keyId) {
									i.keyfiles.push({
										fileId: resData.data.id,
										keyId: keyId,
										url: resData.data.uri
									})
								}
							})
						}
					}
				})
			})
		}
	}
	const deletePic = (e) => {
		uni.showModal({
			title: '提示',
			content: '确认要删除该条数据吗？',
			success: function (res) {
				if (res.confirm) {
					const index = data.list.findIndex(item => item.id == e.file.keyId)
					filedelete(e.file.keyId, e.file.fileId).then(res => {
						data.list[index].keyfiles.splice(e.index, 1)
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	
	}
	const handleSearch = () => {
		getMescroll().resetUpScroll() 
	}

</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.searchBox {
		padding: 30rpx 20rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 #eeeeee;
	}


	.key-card {
		background: #fff;
		margin-bottom: 40rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 0 #bbbbbb;

		.keyBox {
			.name {
				margin-bottom: 20rpx;
			}
		}
	}
</style>